import React, {Component} from 'react';
import { Card, Spin, Row, Col, Statistic} from "antd";
import {getInfo} from './../../api/informat'
import './style.less'

class Informat extends Component {
    constructor(props) {
        super(props);
        this.state = {
            amount: 0,
            total: 0,
            carAmount: 0,
            leaseAmount: 0,
            spinnning: false
        }
    }

    init = () => {
        this.setState({
            spinning: true
        })
        getInfo().then(res => {
            this.setState({
                amount: res.data.amount,
                total: res.data.total,
                carAmount: res.data.carAmount,
                leaseAmount: res.data.leaseAmount
            })
        }).finally(() => {
            this.setState({
                spinning: false
            })
        })
    }

    componentDidMount() {
        this.init()
    }

    render() {
        return (
            <Card title="数据统计" bordered={false}>
                <Spin spinning={this.state.spinnning}>
                    <Row gutter={16}>
                        <Col span={6}>
                            <div className='col'>
                                <Statistic className='statistic' title="总金额" value={this.state.amount} />
                            </div>
                        </Col>
                        <Col span={6}>
                            <div className='col'>
                                <Statistic className='statistic' title="总用户数" value={this.state.total}/>
                            </div>
                        </Col>
                        <Col span={6}>
                            <div className="col">
                                <Statistic className='statistic' title="汽车库存量" value={this.state.carAmount} />
                            </div>
                        </Col>
                        <Col span={6}>
                            <div className="col">
                                <Statistic className='statistic' title="租赁数量" value={this.state.leaseAmount} />
                            </div>
                        </Col>
                    </Row>
                </Spin>
            </Card>
        );
    }
}

export default Informat;